<template>
  <view class="container" @touchmove.prevent @tap="handleContainerTap" :style="themeStyle">
    <!-- 添加音乐播放器组件 -->
    <MusicPlayer ref="musicPlayer" />
    
    <view class="content">
      <!-- 随记页面 -->
      <view v-if="currentTab === 'notes'" class="notes-page">
        <view class="header">
          <!-- 状态栏占位，让它成为header的一部分 -->
          <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
          <view class="header-content">
            <view class="greeting-section">
              <view class="left-section">
                <text class="greeting">{{ greeting }}</text>
                <text class="sub-greeting">{{ motivationalText }}</text>
              </view>
              <view class="date-badge">
                <text class="date-num">{{ dateNum }}</text>
                <text class="date-info">{{ dateInfo }}</text>
              </view>
            </view>
            
            <!-- 搜索框和功能按钮 -->
            <view class="search-wrapper">
              <view class="search-box">
                <uni-icons type="search" size="16" color="rgba(255, 255, 255, 0.8)"></uni-icons>
                <input 
                  class="search-input" 
                  type="text"                                          
                  v-model="searchText"
                  placeholder="搜索待办事项" 
                  placeholder-class="search-placeholder"
                  confirm-type="search"
                />
                <uni-icons 
                  v-if="searchText" 
                  type="clear" 
                  size="14" 
                  color="rgba(255, 255, 255, 0.6)"
                  @click="searchText = ''"
                  class="clear-icon"
                ></uni-icons>
              </view>
              <!-- 修改功能按钮图标 -->
              <view class="function-btn" @tap="showFunctionMenu">
                <uni-icons type="settings-filled" size="20" :color="themeColors.primary"></uni-icons>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 使用TodoList组件 -->
        <TodoList 
          ref="todoList"
          :todos="filteredTodos"
          @toggle="toggleTodo"
          @edit="editTodo"
          @delete="deleteTodo"
          @sort="handleSort"
          @clearCompleted="clearCompleted"
        />
      </view>

      <!-- 我的页面 -->
      <view v-else class="profile-page">
        <Profile :todos="todos" />
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: currentTab === 'notes' }" @click="switchTab('notes')">
        <uni-icons type="list" size="24" :color="currentTab === 'notes' ? themeColors.primary : '#666'"></uni-icons>
        <text class="tab-text" :class="{ 'active-text': currentTab === 'notes' }">清单</text>
      </view>
      
      <!-- 添加中间的随记按钮 -->
      <view class="tab-item add-button" @click="showAddTodo">
        <view class="add-button-circle">
          <uni-icons type="plus" size="24" :color="themeColors.secondary"></uni-icons>
        </view>
        <text class="tab-text">随记</text>
      </view>
      
      <view class="tab-item" :class="{ active: currentTab === 'profile' }" @click="switchTab('profile')">
        <uni-icons type="person-filled" size="24" :color="currentTab === 'profile' ? themeColors.primary : '#666'"></uni-icons>
        <text class="tab-text" :class="{ 'active-text': currentTab === 'profile' }">我的</text>
      </view>
    </view>

    <!-- 添加待办弹窗 -->
    <uni-popup ref="addTodoPopup" type="bottom" :safe-area="true">
      <view class="add-todo-container">
        <view class="popup-header">
          <text class="cancel-btn" @click="cancelAdd">取消</text>
          <text class="popup-title">{{ isEditing ? '编辑待办' : '添加待办' }}</text>
          <text class="confirm-btn" @click="confirmAdd">确定</text>
        </view>
        <view class="form-content">
          <!-- 待办事项输入 -->
          <view class="form-item">
            <text class="form-label">待办事项</text>
            <input 
              class="todo-input"
              v-model="newTodo.text"
              placeholder="请输入待办事项"
              placeholder-class="input-placeholder"
            />
          </view>
          
          <!-- 优先级选择 -->
          <view class="form-item">
            <text class="form-label">优先级</text>
            <view class="priority-list">
              <view 
                v-for="(text, index) in priorityTexts" 
                :key="index"
                class="priority-item"
                :class="[
                  `priority-${index}`,
                  { active: newTodo.priority === index }
                ]"
                @click="newTodo.priority = index"
              >
                <text>{{ text }}</text>
              </view>
            </view>
          </view>
          
          <!-- 提醒时间 -->
          <view class="form-item">
            <text class="form-label">提醒时间</text>
            <view class="time-picker-trigger" @click="showTimePicker">
              <text :class="{'has-time': newTodo.reminderTime}">
                {{ newTodo.reminderTime || '设置提醒时间' }}
              </text>
              <uni-icons type="arrowright" size="14" color="#666"></uni-icons>
            </view>
            <!-- 添加设置闹钟按钮 -->
            <button 
              class="alarm-btn"
              :class="{ 'alarm-btn-active': newTodo.reminderTime }"
              :disabled="!newTodo.reminderTime" 
              @click="setAlarm"
            >
              设置闹钟提醒
            </button>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 时间选择器组件 -->
    <DateTimePicker ref="timePicker" @confirm="onTimeSelected" />

    <!-- 功能菜单弹窗 -->
    <uni-popup ref="functionPopup" type="bottom">
      <view class="add-todo-container">
        <view class="popup-header">
          <text class="cancel-btn" @click="hideFunctionMenu">取消</text>
          <text class="popup-title">功能面板</text>
          <text class="confirm-btn" @click="hideFunctionMenu">确定</text>
        </view>
        <view class="menu-options">
          <!-- 音乐播放器选项 -->
          <view class="menu-group">
            <view class="group-title">音乐</view>
            <view class="menu-option" @tap="showMusicPlayer">
              <view class="option-left">
                <uni-icons type="headphones" size="20" color="#6E8CD5"></uni-icons>
                <text>轻音乐</text>
              </view>
              <text class="music-tip">来一首美妙的music吧</text>
            </view>
          </view>

          <view class="menu-group">
            <view class="group-title">排序方式</view>
            <view class="menu-option" @tap="handleSort('priority')">
              <view class="option-left">
                <uni-icons type="star-filled" size="20" color="#FF9800"></uni-icons>
                <text>优先级排序</text>
              </view>
              <uni-icons v-if="sortType === 'priority'" type="checkmarkempty" size="20" color="#6E8CD5"></uni-icons>
            </view>
            <view class="menu-option" @tap="showCompletedSortOptions">
              <view class="option-left">
                <uni-icons type="checkbox-filled" size="20" color="#6E8CD5"></uni-icons>
                <text>状态排序</text>
              </view>
              <text class="sort-state">{{ completedSortState }}</text>
            </view>
          </view>

          <!-- 主题切换选项 -->
          <view class="menu-group">
            <view class="group-title">主题</view>
            <view class="menu-option" @tap="showThemeMenu">
              <view class="option-left">
                <uni-icons type="color" size="20" :color="themeColors.primary"></uni-icons>
                <text>主题切换</text>
              </view>
              <view class="theme-preview">
                <view class="theme-dot" :style="{ background: themeColors.primary }"></view>
                <view class="theme-dot" :style="{ background: themeColors.secondary }"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 添加确认弹窗 -->
    <ConfirmModal
      ref="confirmModal"
      :content="confirmContent"
      @confirm="confirmAction"
      @cancel="cancelAction"
    />

    <!-- 添加完成状态排序选项弹窗 -->
    <uni-popup ref="completedSortPopup" type="bottom">
      <view class="sort-options">
        <view class="sort-title">选择排序方式</view>
        <view class="sort-list">
          <view 
            class="sort-item" 
            v-for="(state, index) in ['默认', '已完成在前', '未完成在前']" 
            :key="index"
            @tap="selectCompletedSort(index)"
          >
            <text>{{ state }}</text>
            <uni-icons 
              v-if="sortType === 'completed' && completedSortCount === index" 
              type="checkmarkempty" 
              size="20" 
              color="#6E8CD5"
            ></uni-icons>
          </view>
        </view>
        <view class="sort-cancel" @tap="hideCompletedSortOptions">取消</view>
      </view>
    </uni-popup>

    <!-- 主题选择弹窗 -->
    <uni-popup ref="themePopup" type="bottom">
      <view class="theme-container">
        <view class="popup-header">
          <text class="cancel-btn" @tap="hideThemeMenu">取消</text>
          <text class="popup-title">选择主题</text>
          <text class="confirm-btn" @tap="hideThemeMenu">确定</text>
        </view>
        <view class="theme-list">
          <view 
            v-for="theme in themes" 
            :key="theme.name"
            class="theme-item"
            :class="{ active: currentTheme === theme.name }"
            @tap="switchTheme(theme.name)"
          >
            <view class="theme-colors">
              <view class="theme-dot" :style="{ background: theme.colors.primary }"></view>
              <view class="theme-dot" :style="{ background: theme.colors.secondary }"></view>
            </view>
            <text class="theme-label">{{ theme.label }}</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import Profile from '../profile/profile.vue'
import DateTimePicker from '@/components/DateTimePicker.vue'
import TodoList from '@/components/TodoList.vue'
import ConfirmModal from '@/components/ConfirmModal.vue'
import MusicPlayer from '@/components/MusicPlayer.vue'
import { themes, ThemeManager } from '@/theme/themes.js'

export default {
  components: {
    Profile,
    DateTimePicker,
    TodoList,
    ConfirmModal,
    MusicPlayer
  },
  data() {
    return {
      currentTab: 'notes',
      todos: [], // 初始化为空数组
      statusBarHeight: 0, // 添加状态栏高度变量
      greeting: '',
      dateNum: '',
      dateInfo: '',
      motivationalText: '',
      timer: null,  // 添加定时器
      newTodo: {
        text: '',
        priority: 0,
        reminderTime: ''
      },
      priorityTexts: ['普通', '重要', '紧急'],
      searchText: '',  // 添加搜索文本
      isEditing: false,
      editingIndex: -1,
      confirmContent: '',  // 确认框内容
      confirmType: '',    // 确认类型
      sortType: '',    // 排序类型：priority/completed
      completedSortCount: 0,  // 完成状态排序的计数器：0-默认，1-已完成在前，2-未完成在前
      themeManager: new ThemeManager(),
      themes: themes, // 添加 themes 到 data 中
      todoToDelete: null, // 要删除的待办ID
      currentThemeStyle: {}, // 初始化为空对象
      currentTheme: uni.getStorageSync('currentTheme') || 'default' // 添加 currentTheme
    }
  },
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    
    // 先更新文本
    this.updateGreetingAndDate()
    this.updateMotivationalText()
    
    // 加载本地存储的待办事项
    uni.getStorage({
      key: 'todos',
      success: (res) => {
        // 为旧数据补全id
        this.todos = (res.data || []).map(todo => ({
          ...todo,
          id: todo.id || Date.now() + Math.random().toString(36).substr(2, 9) // 确保id唯一
        }))
      }
    })
    // 禁用页面下拉刷新
    uni.stopPullDownRefresh()
    
    // 添加定时器，每分钟更新一次
    this.timer = setInterval(() => {
      this.updateGreetingAndDate()
      this.updateMotivationalText()
    }, 60000)
    
    // 恢复排序设置
    this.sortType = uni.getStorageSync('sortType') || ''
    this.completedSortCount = uni.getStorageSync('completedSortCount') || 0
  },
  onPullDownRefresh() {
    // 禁用下拉刷新
    return false
  },
  onUnload() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  computed: {
    completedCount() {
      return this.todos.filter(todo => todo.completed).length
    },
    completedRate() {
      return this.todos.length ? this.completedCount / this.todos.length : 0
    },
    completedSortState() {
      const states = ['默认排序', '已完成在前', '未完成在前']
      return states[this.completedSortCount]
    },
    // 添加过滤后的待办事项列表
    filteredTodos() {
      let result = [...this.todos]
      
      // 先按搜索过滤
      if (this.searchText) {
        result = result.filter(todo => 
          todo.text.toLowerCase().includes(this.searchText.toLowerCase())
        )
      }
      
      // 再按类型排序
      switch(this.sortType) {
        case 'priority':
          result.sort((a, b) => b.priority - a.priority)
          break
          
        case 'completed':
          if (this.completedSortCount === 1) {
            result.sort((a, b) => {
              if (a.completed === b.completed) {
                return b.priority - a.priority
              }
              return b.completed ? 1 : -1
            })
          } else if (this.completedSortCount === 2) {
            result.sort((a, b) => {
              if (a.completed === b.completed) {
                return b.priority - a.priority
              }
              return a.completed ? 1 : -1
            })
          }
          break
      }
      
      return result
    },
    themeStyle() {
      return this.currentThemeStyle
    },
    themeColors() {
      return this.themeManager.getCurrentThemeColors()
    }
  },
  watch: {
  },
  methods: {
    switchTab(tab) {
      this.currentTab = tab
    },
    showAddTodo() {
      this.newTodo = {
        text: '',
        priority: 0,
        reminderTime: ''
      }
      this.$refs.addTodoPopup.open('bottom')
    },
    cancelAdd() {
      this.$refs.addTodoPopup.close()
      this.resetForm()
    },
    confirmAdd() {
      if (!this.newTodo.text.trim()) {
        uni.showToast({
          title: '请输入待办事项',
          icon: 'none'
        })
        return
      }
      
      if (this.isEditing) {
        // 编辑模式
        const todo = {
          ...this.todos[this.editingIndex],
          ...this.newTodo,
          isEditing: true // 添加编辑标记
        }
        this.todos[this.editingIndex] = todo
        
        // 一段时间后移除标记
        setTimeout(() => {
          todo.isEditing = false
        }, 500)
      } else {
        // 添加模式
        const newTodo = {
          ...this.newTodo,
          id: Date.now(),
          completed: false,
          isNew: true // 添加新建标记
        }
        this.todos.push(newTodo)
        
        // 一段时间后移除标记
        setTimeout(() => {
          newTodo.isNew = false
        }, 500)
      }

      this.saveTodos()
      this.$refs.addTodoPopup.close()
      this.resetForm()
    },
    showTimePicker() {
      this.$refs.timePicker.show(this.newTodo.reminderTime)
    },
    onTimeSelected(time) {
      this.newTodo.reminderTime = time
    },
    toggleTodo(id) {
      const todo = this.todos.find(t => t.id === id)
      if (todo) {
        todo.completed = !todo.completed
        this.saveTodos()
      }
    },
    deleteTodo(id) {
      const index = this.todos.findIndex(todo => todo.id === id)
      if (index !== -1) {
        this.todos.splice(index, 1)
        this.saveTodos()
      }
    },
    editTodo({ id, todo }) {
      const index = this.todos.findIndex(t => t.id === id)
      if (index !== -1) {
        // 设置编辑状态和数据
        this.isEditing = true
        this.editingIndex = index
        this.newTodo = { ...todo }  // 复制待编辑的todo数据
        
        // 打开弹窗
        this.$refs.addTodoPopup.open('bottom')
      }
    },
    saveTodos() {
      uni.setStorage({
        key: 'todos',
        data: this.todos
      })
    },
    updateGreetingAndDate() {
      const hour = new Date().getHours()
      if (hour < 6) {
        this.greeting = '夜深了，注意休息'
      } else if (hour < 9) {
        this.greeting = '早安，美好的一天'
      } else if (hour < 12) {
        this.greeting = '上午好，保持专注'
      } else if (hour < 14) {
        this.greeting = '中午好，该休息了'
      } else if (hour < 17) {
        this.greeting = '下午好，继续加油'
      } else if (hour < 19) {
        this.greeting = '傍晚好，规划一下'
      } else {
        this.greeting = '晚上好，总结一下'
      }

      const date = new Date()
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      this.dateNum = date.getDate()
      this.dateInfo = `${date.getMonth() + 1}月 ${weekDays[date.getDay()]}`
    },
    updateMotivationalText() {
      const hour = new Date().getHours()
      const texts = [
        { time: 6, text: '保持专注，你很棒' },
        { time: 9, text: '让我们开始行动吧' },
        { time: 11, text: '保持专注，你很棒' },
        { time: 14, text: '休息一下，再出发' },
        { time: 17, text: '完成比完美更重要' },
        { time: 19, text: '回顾今天的收获' },
        { time: 22, text: '准备好迎接明天' },
        { time: 24, text: '早点休息，养精蓄锐' }
      ]
      
      // 修改查找逻辑
      let currentText = texts[0]
      for (const text of texts) {
        if (hour >= text.time) {
          currentText = text
        } else {
          break
        }
      }
      this.motivationalText = currentText.text
    },
    setAlarm() {
      // 先检查待办事项内容
      if (!this.newTodo.text.trim()) {
        uni.showToast({
          title: '请输入待办事项',
          icon: 'none'
        });
        return;
      }
      
      // 再检查提醒时间
      if (!this.newTodo.reminderTime) {
        uni.showToast({
          title: '请先选择提醒时间',
          icon: 'none'
        });
        return;
      }

      const [hour, minute] = this.newTodo.reminderTime.split(':').map(Number);
      
      try {
        // 尝试使用原生插件
        const alarmPlugin = uni.requireNativePlugin('alarm-plugin');
        if (alarmPlugin) {
          alarmPlugin.setAlarm(hour, minute, this.newTodo.text, (result) => {
            if (result === 'success') {
              uni.showToast({
                title: '闹钟设置成功',
                icon: 'success'
              });
            } else {
              this.fallbackToSystemAlarm(hour, minute);
            }
          });
        } else {
          this.fallbackToSystemAlarm(hour, minute);
        }
      } catch (e) {
        this.fallbackToSystemAlarm(hour, minute);
      }
    },
    fallbackToSystemAlarm(hour, minute) {
      try {
        const Intent = plus.android.importClass("android.content.Intent");
        const AlarmClock = plus.android.importClass("android.provider.AlarmClock");
        const main = plus.android.runtimeMainActivity();
        
        const intent = new Intent(AlarmClock.ACTION_SET_ALARM);
        intent.putExtra(AlarmClock.EXTRA_MESSAGE, this.newTodo.text);
        intent.putExtra(AlarmClock.EXTRA_HOUR, hour);
        intent.putExtra(AlarmClock.EXTRA_MINUTES, minute);
        intent.putExtra(AlarmClock.EXTRA_VIBRATE, true);
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        
        main.startActivity(intent);
        
        uni.showToast({
          title: '请在系统闹钟中设置',
          icon: 'none',
          duration: 2000
        });
      } catch (e) {
        uni.showToast({
          title: '无法设置闹钟，请手动设置',
          icon: 'none',
          duration: 2000
        });
      }
    },
    resetForm() {
      this.newTodo = {
        text: '',
        priority: 0,
        reminderTime: ''
      };
      this.isEditing = false;
      this.editingIndex = -1;
    },
    handleSort(type) {
      if (type === 'completed') {
        if (this.sortType === type) {
          // 已经是完成状态排序，切换排序方式
          this.completedSortCount = (this.completedSortCount + 1) % 3
          if (this.completedSortCount === 0) {
            // 回到默认状态时取消排序
            this.sortType = ''
          }
        } else {
          // 首次选择完成状态排序
          this.sortType = type
          this.completedSortCount = 1  // 从已完成在前开始
        }
      } else {
        // 其他排序方式
        if (this.sortType === type) {
          this.sortType = ''
        } else {
          this.sortType = type
        }
      }
      
      // 保存排序设置
      uni.setStorageSync('sortType', this.sortType)
      uni.setStorageSync('completedSortCount', this.completedSortCount)
    },
    showFunctionMenu() {
      this.$refs.functionPopup.open()
    },
    hideFunctionMenu() {
      this.$refs.functionPopup.close()
    },
    showCompletedSortOptions() {
      this.$refs.completedSortPopup.open()
      this.$refs.functionPopup.close()
    },
    
    hideCompletedSortOptions() {
      this.$refs.completedSortPopup.close()
    },
    
    selectCompletedSort(index) {
      this.completedSortCount = index
      this.sortType = index === 0 ? '' : 'completed'
      
      // 保存排序设置
      uni.setStorageSync('sortType', this.sortType)
      uni.setStorageSync('completedSortCount', this.completedSortCount)
      
      this.hideCompletedSortOptions()
    },
    handleContainerTap(e) {
      // 如果点击的不是播放器本身,则关闭播放器
      if (this.$refs.musicPlayer && this.$refs.musicPlayer.isExpanded) {
        const playerEl = e.target.closest('.music-player')
        if (!playerEl) {
          this.$refs.musicPlayer.collapsePlayer()
        }
      }
    },
    showMusicPlayer() {
      // this.$refs.musicPlayer.expandPlayer()
        // 显示开发中提示
        uni.showToast({
        title: '功能正在开发中~~~',
        icon: 'none'
      })
      // 关闭功能面板
      // this.hideFunctionMenu()
    },
    switchTheme(themeName) {
      this.currentTheme = themeName
      this.themeManager.switchTheme(themeName)
      this.$refs.themePopup.close()
    },
    applyTheme(colors) {
      // 直接更新主题样式
      this.currentThemeStyle = {
        '--primary': colors.primary,
        '--secondary': colors.secondary,
        '--background': colors.background,
        '--headerBg': colors.headerBg,
        '--cardBg': colors.cardBg
      }
    },
    // 确认操作
    confirmAction() {
      if (this.confirmType === 'delete') {
        this.todos = this.todos.filter(todo => todo.id !== this.todoToDelete)
        uni.setStorageSync('todos', this.todos)
      } else if (this.confirmType === 'clearCompleted') {
        this.todos = this.todos.filter(todo => !todo.completed)
        uni.setStorageSync('todos', this.todos)
      }
      this.$refs.confirmModal.hide()
    },
    
    // 取消操作
    cancelAction() {
      this.$refs.confirmModal.hide()
    },
    
    // 清除已完成
    clearCompleted() {
      this.confirmContent = '确定要清除所有已完成的待办吗？'
      this.confirmType = 'clearCompleted'
      this.$refs.confirmModal.show()
    },
    showThemeMenu() {
      this.$refs.functionPopup.close()
      this.$refs.themePopup.open()
    },
    hideThemeMenu() {
      this.$refs.themePopup.close()
    }
  },
  created() {
    // 初始化主题样式
    this.currentThemeStyle = {
      '--primary': this.themeManager.getCurrentThemeColors().primary,
      '--secondary': this.themeManager.getCurrentThemeColors().secondary,
      '--background': this.themeManager.getCurrentThemeColors().background,
      '--headerBg': this.themeManager.getCurrentThemeColors().headerBg,
      '--cardBg': this.themeManager.getCurrentThemeColors().cardBg
    }
    
    // 确保 currentTheme 与 themeManager 同步
    this.currentTheme = this.themeManager.currentTheme

    // 监听主题变化事件
    uni.$on('themeChanged', this.applyTheme)
    
    // 延迟加载保存的主题
    setTimeout(() => {
      this.themeManager.loadSavedTheme()
    }, 100)
  },
  destroyed() {
    // 移除事件监听
    uni.$off('themeChanged', this.applyTheme)
  }
}
</script>

<style>
@import '@/theme/theme.css';

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  background: var(--background); 
  position: relative;
  overflow: hidden;
  touch-action: none;
}

.content {
  flex: 1;
  overflow: hidden;
  padding-bottom: 100rpx;
  position: relative;
}

.notes-page {
  height: 100%;
  padding: 0 30rpx 120rpx 30rpx;
  position: relative;
  overflow: hidden;
}

/* 头部样式 */
.header {
  background: var(--headerBg);
  margin: 0 -30rpx;
  padding: 40rpx 30rpx;
  border-radius: 0 0 40rpx 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(110, 140, 213, 0.15);
  position: relative;
  overflow: hidden;
  padding-bottom: 30rpx;
  margin-bottom: 30rpx;
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(120deg, 
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 50.1%);
  opacity: 0.4;
}

.header-content {
  position: relative;
  z-index: 1;
  padding-bottom: 20rpx;
}

.greeting-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 20rpx;
}

.left-section {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  flex: 1;
  margin-right: 20rpx;
}

.greeting {
  font-size: 42rpx;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.06);
  letter-spacing: 1rpx;
}

.sub-greeting {
  font-size: 30rpx;
  color: rgba(255, 255, 255, 0.82);
  display: block;
  white-space: nowrap;
  margin-top: 8rpx;
  letter-spacing: 0.5rpx;
}

.date-badge {
  background: rgba(255, 255, 255, 0.15);
  padding: 12rpx 20rpx;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(10px);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.date-num {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1rpx;
}

.date-info {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4rpx;
  letter-spacing: 0.5rpx;
}

/* 底部导航栏样式 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #FFFFFF;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 99;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
}

.tab-text {
  font-size: 24rpx;
  color: #666;
  margin-top: 4rpx;
}

.active-text {
  color: var(--primary);
}

/* 修改添加按钮样式 */
.add-button {
  position: relative;
  top: 0;  /* 移除上移距离 */
}

.add-button-circle {
  width: 48rpx;    /* 与两侧图标完全相同的尺寸 */
  height: 48rpx;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(110, 140, 213, 0.25);
  margin-bottom: 4rpx;
}

/* 调整图标大小与两侧一致 */
.add-button-circle .uni-icons {
  transform: scale(1);  /* 恢复正常大小 */
}

/* 底部安全区域适配 */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .tab-bar {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(100rpx + constant(safe-area-inset-bottom));
    height: calc(100rpx + env(safe-area-inset-bottom));
  }
}

/* 状态栏样式 */
.status-bar {
  width: 100%;
}

/* 添加待办弹窗样式 */
.add-todo-container {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.cancel-btn, .confirm-btn {
  font-size: 32rpx;
  padding: 12rpx;
}

.cancel-btn {
  color: #666;
}

.confirm-btn {
  color: var(--primary);
  font-weight: 500;
}

.form-content {
  padding: 32rpx;
}

.form-item {
  margin-bottom: 32rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}

.todo-input {
  background: #F8F8F8;
  padding: 20rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
}

.input-placeholder {
  color: #999;
}

.priority-list {
  display: flex;
  gap: 20rpx;
  padding: 10rpx 0;
}

.priority-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  border-radius: 12rpx;
  font-size: 28rpx;
  position: relative;
  background: #F8F8F8;
  transition: all 0.3s ease;
  border: 2rpx solid transparent;
}

/* 普通优先级 */
.priority-0 {
  color: #666;
}
.priority-0.active {
  background: rgba(158, 158, 158, 0.1);
  color: #666;
  border-color: #999;
}

/* 重要优先级 */
.priority-1 {
  color: #FF9800;
}
.priority-1.active {
  background: rgba(255, 152, 0, 0.1);
  color: #FF9800;
  border-color: #FF9800;
}

/* 紧急优先级 */
.priority-2 {
  color: #F44336;
}
.priority-2.active {
  background: rgba(244, 67, 54, 0.1);
  color: #F44336;
  border-color: #F44336;
}

.priority-item:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.time-picker-trigger {
  background: #F8F8F8;
  padding: 20rpx;
  border-radius: 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #999;
}

.time-picker-trigger .has-time {
  color: #333;
}

/* 搜索框和功能按钮 */
.search-wrapper {
  margin-top: 50rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.search-box {
  flex: 1;
  height: 72rpx;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  backdrop-filter: blur(10px);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

/* 功能按钮样式 */
.function-btn {
  width: 72rpx;
  height: 72rpx;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

/* 功能菜单样式 */
.menu-options {
  margin-bottom: 30rpx;
}

.menu-group {
  margin-bottom: 24rpx;
}

.group-title {
  font-size: 24rpx;
  color: #999;
  padding: 16rpx 24rpx 8rpx;
}

.menu-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  font-size: 28rpx;
  color: #666;
  background: #FFFFFF;
  transition: background-color 0.3s;
}

.option-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.menu-option:active {
  background-color: rgba(var(--primary), 0.1);
}

.menu-option.warning {
  color: #F56C6C;
}

.menu-option.warning uni-icons {
  color: #F56C6C;
}

/* 搜索框样式优化 */
.search-box .uni-icons {
  margin-right: 12rpx;
}

/* 输入框样式 */
.search-input {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 28rpx;
  color: #fff;
  padding: 0 12rpx;
}

/* 占位符样式 */
.search-placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 28rpx;
}

/* 修改清空图标样式 */
.clear-icon {
  padding: 10rpx;  /* 增加点击区域 */
}

/* 修改闹钟按钮样式 */
.alarm-btn {
  margin-top: 20rpx;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  background: #fff;
  border: 2rpx solid #ddd;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

/* 有提醒时间时的样式 */
.alarm-btn-active {
  background: rgba(var(--primary), 0.1);
  color: var(--primary);
  border-color: var(--primary);
}

/* 禁用状态样式 */
.alarm-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 按压效果 */
.alarm-btn:not(:disabled):active {
  opacity: 0.8;
}

.sort-state {
  font-size: 28rpx;
  color: #6E8CD5;
  margin-right: 8rpx;
}

.sort-options {
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;
}

.sort-title {
  text-align: center;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 30rpx;
}

.sort-list {
  margin-bottom: 30rpx;
}

.sort-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  font-size: 28rpx;
  color: #666;
}

.sort-item:active {
  background: #F5F7FA;
}

.sort-cancel {
  text-align: center;
  padding: 20rpx;
  color: #999;
  font-size: 28rpx;
  border-top: 1rpx solid #EEEEEE;
}

.music-tip {
  font-size: 24rpx;
  color: #999;
  margin-right: 8rpx;
}

/* 添加新的主题预览点样式 */
.theme-dots {
  display: flex;
  gap: 8rpx;
  margin-right: 16rpx;
  align-items: center;
}

.theme-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

/* 悬停效果 */
.menu-option:active .theme-dot {
  transform: scale(0.9);
}

.theme-preview {
  display: flex;
  gap: 8rpx;
}

.theme-container {
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.theme-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
  padding: 24rpx;
}

.theme-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.theme-item.active {
  background: rgba(var(--primary), 0.1);
}

.theme-colors {
  display: flex;
  gap: 8rpx;
}

.theme-label {
  font-size: 24rpx;
  color: #666;
}
</style>
